import styles from './editCanvas.module.scss';
import { type FC, type MouseEvent } from 'react';
import classNames from 'classnames';
import { useComponentStore, useStore } from '@/store';
import type { questionComponentType } from '@/utils/type';
import QuestionTitle from './commpoent/title/questionTitle';
import QuestionInput from './commpoent/input/questionInput';
import useBindCanvasKeyPress from '@/hooks/useBindCanvasKeyPress';
import QuestionParagraph from './commpoent/paragraph/questionParagraph';
import QuestionInfo from './commpoent/info/questionInfo';
import QuestionTextarea from './commpoent/textarea/questionTextarea';
import QuestionRadio from './commpoent/radio/questionRadio';
import QuestionCheckbox from './commpoent/checkbox/questionCheckbox';
import SortableContainer from './dragSortable/sortableContainer';
import SortableItem from './dragSortable/sortableItem';

const getComponent = (item: questionComponentType) => {
  if (item.type === 'questionTitle') {
    return <QuestionTitle  {...item.props} ></QuestionTitle>
  }
  else if (item.type === 'questionInput') {
    return <QuestionInput {...item.props}></QuestionInput>
  }
  else if (item.type === 'questionParagraph')
    return <QuestionParagraph {...item.props}></QuestionParagraph>
  else if (item.type === 'questionInfo')
    return <QuestionInfo {...item.props}></QuestionInfo>
  else if (item.type === 'questionTextarea')
    return <QuestionTextarea {...item.props}></QuestionTextarea>
  else if (item.type === 'questionRadio')
    return <QuestionRadio {...item.props}></QuestionRadio>
  else if (item.type === 'questionCheckbox')
    return <QuestionCheckbox {...item.props}></QuestionCheckbox>

}

type PropsType = {
  isDrag: boolean;
}

const EditCanvas: FC<PropsType> = ({ isDrag }) => {

  const {componentList, moveComponent} = useComponentStore()
  const {selectedId,setSelectedId} = useStore()


  const handleSelect = (e: MouseEvent<HTMLDivElement>, id: string) => {
    //阻止事件冒泡
    e.stopPropagation()
    setSelectedId(id)
  }

  //处理键盘事件
  useBindCanvasKeyPress()




  const ListWithId = componentList.map((item) => {
    return { ...item, id: item.fe_id }
  })

  const handleDragEnd = (oldIndex: number, newIndex: number) => {
    moveComponent(oldIndex, newIndex)
  }

  return (
    <SortableContainer isDrag={isDrag} items={ListWithId} onDragEnd={handleDragEnd}>
      <div className={styles.canvas}>
        {componentList.map((item, index) => {
          const selectedStyle = classNames({
            [styles['component-wrapper']]: true,
            [styles['selected']]: selectedId === item.fe_id,
            [styles['disabled']]: item.isLocked
          })

          return (
            <SortableItem id={item.fe_id} key={item.fe_id} >
              <div style={{ display: item.isHidden ? 'none' : '' }} key={index} className={selectedStyle} onClick={(e) => handleSelect(e, item.fe_id)}>
                <div className={styles['component-wrapper-inner']} >
                  {getComponent(item)}
                </div>
              </div>
            </SortableItem>
          )
        })}
      </div>
    </SortableContainer>
  )
}


export default EditCanvas;